﻿@{
    Layout = null;
    ViewData["Title"] = "IndexFind";
}

<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<!-- 引入 echarts.js -->
<script src="~/js/echarts.min.js"></script>
@*<script src="https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"></script>*@
<h1>薪酬发放查询</h1>

<div id="app">
    @*第一部分*@
    <div v-if="flagHid==1">
        <el-form ref="salary_grant" :model="salary_grant" :rules="rules" label-width="120px">
            <el-row :gutter="20">
                <el-col :span="11">
                    <el-form-item label="请输入薪酬单号:">
                        <el-input v-model="salary_grant.salary_grant_id" placeholder="请输入薪酬单号"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="11">
                    <el-form-item label="请输入关键字:">
                        <el-input v-model="salary_grant.key_word" placeholder="请输入关键字"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="16">
                    <el-form-item label="请选择发放时间:">
                        <el-date-picker v-model="salary_grant.find_time"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" v-on:click="handleFind()">查询</el-button>
                    @*<el-button type="info" v-on:click="handleHidden" style="margin-left:20px">收起</el-button>*@
                </el-col>
            </el-row>
        </el-form>
    </div>
    @*第二部分*@
    <div v-if="flagHid==2">
        <el-button type="info" v-on:click="flagHid=1">返回</el-button>
        <el-table :data="salary_grants"
                  height="250"
                  border
                  style="width: 100%">
            <el-table-column prop="salary_grant_id" label="薪酬编号" width="170">
                @*点击薪酬编号行进去跳转到第三部分，也就是本行的薪酬明细信息*@
                <template slot-scope="scope">
                    @*这里业务场景的点击事件,是不需要用到按钮的,所以我们需要用到的是原生的vue点击事件,而加native.prevent的精髓就在此*@
                    <el-button v-on:click.native.prevent="handleSalaryIDClick(scope.row)"
                               type="text"
                               size="medium">
                        {{scope.row.salary_grant_id}}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="first_kind_name" label="I级机构名称" width="170">
            </el-table-column>
            <el-table-column prop="second_kind_name" label="II级机构名称" width="170">
            </el-table-column>
            <el-table-column prop="third_kind_name" label="III级机构名称" width="170">
            </el-table-column>
            <el-table-column prop="human_amount" label="人数" width="170">
            </el-table-column>
            <el-table-column prop="salary_standard_sum" label="基本薪酬总额(元)" width="170">
            </el-table-column>
        </el-table>
        <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="pgcurrent"
                       :page-sizes="[3, 6, 9, 11]"
                       :page-size="pgsize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="rows">
        </el-pagination>
    </div>
    @*第三部分模态框*@
    <el-dialog title="薪酬发放明细"
               :visible.sync="dialogVisible"
               width="60%">
        @*头部*@
        <el-row :gutter="20">
            <el-col :span="6">
                薪酬单编号：{{salary_grantChecked.salary_grant_id}}
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                机构：{{salary_grantChecked.first_kind_name}}&nbsp;{{salary_grantChecked.second_kind_name}}&nbsp;{{salary_grantChecked.third_kind_name}}
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                本机构总人数：{{salary_grantChecked.human_amount}}
                ，基本薪酬总数：{{salary_grantChecked.salary_standard_sum}}
                ，实发总额：{{salary_grantChecked.salary_paid_sum}}
            </el-col>
            <el-col :span="8" :offset="4">
                登记人：{{salary_grantChecked.register}}
                &nbsp;登记时间：{{salary_grantChecked.regist_time | formatDate}}
            </el-col>
        </el-row>
        <div style="margin:25px 0"></div>
        @*薪酬标准总额的详情表格定位*@
        <el-row :gutter="20">
            <el-col :span="13" :offset="11">
                <el-popover placement="right"
                            width="400"
                            trigger="manual"
                            v-model="visible">
                    <el-table :data="salary_standard_details"
                              stripe
                              style="width: 100%">
                        <el-table-column prop="item_name"
                                         label="薪酬项目名称"
                                         width="170">
                        </el-table-column>
                        <el-table-column prop="salary"
                                         label="薪酬金额"
                                         width="140">
                        </el-table-column>
                    </el-table>
                    <hr/>
                    <div id="main" style="width: 400px;height:300px;"></div>
                </el-popover>
            </el-col>
        </el-row>
        @*薪酬发放明细表单*@
        <el-table :data="salary_grant_details"
                  height="250"
                  border
                  style="width: 100%">
            <el-table-column type="index"
                             width="70" label="序号">
            </el-table-column>
            @*<el-table-column prop="salary_grant_id" label="序号" width="170">
            </el-table-column>*@
            <el-table-column prop="human_id" label="档案编号" width="120">
            </el-table-column>
            <el-table-column prop="human_name" label="姓名" width="100">
            </el-table-column>
            <el-table-column prop="salary_standard_sum" label="标准薪酬总额" width="130">
                @*要扩展明细*@
                <template slot-scope="scope">
                    {{scope.row.salary_standard_sum}}&nbsp;&nbsp;
                    <el-button icon="el-icon-search" circle size="mini" v-on:click="handleDetails(scope.row.human_id)"></el-button>
                </template>
            </el-table-column>
            <el-table-column prop="bouns_sum" label="奖励金额" width="105">
            </el-table-column>
            <el-table-column prop="sale_sum" label="销售绩效总额" width="120">
            </el-table-column>
            <el-table-column prop="deduct_sum" label="应扣金额" width="110">
            </el-table-column>
            <el-table-column prop="salary_paid_sum" label="实发金额" width="110">
            </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" v-on:click="dialogVisible = false">关闭</el-button>
        </span>

    </el-dialog>
</div>

<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            //模块显示标记
            flagHid: 1,
            //模糊查询的字段
            salary_grant: {
                //薪酬单号
                salary_grant_id: '',
                //关键字
                key_word: '',
                //开始和结束时间
                find_time: '',
            },
            //验证规则
            rules: {},
            //查询的结果表达数据源集合
            salary_grants: [],
            pgsize: 3,
            pgcurrent: 1,
            rows: 0,
            //选中单行的薪酬发放类
            salary_grantChecked: {},
            //根据薪酬发放ID查询到的薪酬发放明细集合
            salary_grant_details: [],
            dialogVisible: false,
            //薪酬标准明细集合Popover 弹出框标记
            visible: false,
            //薪酬标准明细集合
            salary_standard_details: [],
        },
        methods: {
            //查询的点击事件
            handleFind() {
                axios.post("/SalaryGrant/SalaryGrantFind", {
                    id: this.salary_grant.salary_grant_id,
                    key_word: this.salary_grant.key_word,
                    open_time: this.salary_grant.find_time[0],
                    close_time: this.salary_grant.find_time[1],
                    pgsize: this.pgsize,
                    pgcurrent: this.pgcurrent
                }).then(res => {
                    this.flagHid = 2;
                    this.salary_grants = res.data.tabs;
                    this.rows = res.data.rows;
                })
            },
            //薪酬编号的点击事件
            handleSalaryIDClick(row) {
                this.dialogVisible = true;
                //给头部赋值
                this.salary_grantChecked = row;
                //发ajax给服务器查询薪酬明细
                axios.get("/SalaryGrant/SalaryGrantDetailById?salary_grant_id=" + this.salary_grantChecked.salary_grant_id).then(res => {
                    this.salary_grant_details = res.data;
                })
            },
            //页面容量改变事件
            handleSizeChange(val) {
                this.pgsize = val;
                this.handleFind();
            },
            //页面下标改变事件
            handleCurrentChange(val) {
                this.pgcurrent = val;
                this.handleFind();
            },
            //薪酬总额明细事件
            handleDetails(human_id) {
                axios.get("/SalaryStandard/SalaryStandardDetailsFindHmid?human_id=" + human_id).then(res => {
                    this.visible = !this.visible;
                    //薪酬标准明细集合赋值
                    this.salary_standard_details = res.data;
                    //画统计图，并赋值操作
                    var opinionDataX = [];
                    var opinionData = [];
                    //给我的X轴和统计图表数据源赋值
                    this.salary_standard_details.forEach((item, index) => {
                        opinionDataX.push(item.item_name);
                        opinionData.push({ value: item.salary })
                    })
                    //console.log("X轴值：", opinionDataX);
                    //console.log("总值：", opinionData);
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '标准薪酬总额明细'
                        },
                        tooltip: {},
                        legend: {
                            orient: 'vertical',
                            x: 'right',
                            y: 'top',
                            data: ['金额']
                        },
                        //柱状图的X轴
                        xAxis: {
                            data: opinionDataX
                        },
                        yAxis: {},
                        series: [{
                            name: '金额',
                            type: 'bar',
                            data: opinionData
                        }]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                })
            }
        },
        //过滤器
        filters: {
            //时间过滤器
            formatDate(date) {
                const nDate = new Date(date)
                //将不满10的数字自动补0
                const year = nDate.getFullYear().toString().padStart(2, 0);
                const month = nDate.getMonth() + 1;
                const day = nDate.getDate();
                return year + '年' + month + '月' + day + '日';
            }
        },
        mounted: function() {

        }
    })
</script>


